 <template>
  <div>
    <el-row>
      <!--检索-->
      <el-form :inline="true" :model="search" class="demo-form-inline">
        <el-input v-if="false" v-model="search.pageNum"></el-input>
        <el-input v-if="false" v-model="search.pageSize"></el-input>
        <el-col :span="4">
          <el-input
            v-model="search.membername"
            placeholder="请输入使用人"
          ></el-input>
        </el-col>
        <el-col :span="12"
          ><div>
            <el-button type="primary" icon="el-icon-search" @click="searchBtn"
              >搜索</el-button
            >
            <el-button type="info" icon="el-icon-loading" @click="emptyBtn"
              >刷新</el-button
            >
          </div>
        </el-col></el-form
      >
      <!--功能列表-->
      <el-table :data="tableData" style="width: 100%">
        <el-table-column type="index" label="Id" sortable> </el-table-column>
        <el-table-column prop="couponname" label="优惠券"> </el-table-column>
        <el-table-column prop="membername" label="使用人"> </el-table-column>
        <el-table-column prop="coupon_code" label="优惠券代码">
        </el-table-column>
        <el-table-column
          prop="get_type"
          :formatter="getStatusName"
          label="获取类型"
        >
        </el-table-column>
        <el-table-column prop="create_time"  label="创建时间"> </el-table-column>
        <el-table-column
          prop="use_status"
          :formatter="getuseStatus"
          label="使用状态"
        >
        </el-table-column>
        <el-table-column prop="use_time" label="使用时间"> </el-table-column>
        <el-table-column prop="order_sn" label="订单编号"> </el-table-column>
        <el-table-column label="操作" width="200px">
          <template slot-scope="scope">
            <el-button
              size="small"
              @click="deleteInfo(scope.$index, scope.row)"
              icon="el-icon-delete"
              type="danger"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!--分页功能-->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page.pageNum"
        :page-sizes="[1, 5, 10, 20, 100]"
        :page-size="page.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="page.total"
      >
      </el-pagination>
    </el-row>
  </div>
</template>

 <script>
export default {
  data() {
    return {
      tableData: [],
      powerData: [],
      treeData: [],
      defaultProps: {
        children: "children",
        label: "label",
      },

      page: {},
      formInfo: {},
      imageUrl: {},
      search: { pageNum: 1, pageSize: 5 },
      formLabelWidth: "120px",
      editInfoState: false,
    };
  },
  created: function () {
    this.load();
  },
  methods: {
    //初始化数据
    load() {
      var _this = this;
      //页面初始化时，加载的方法
      this.$http
        .get("http://localhost:9999/mks/couponHistory/selectAll", {
          params: {
            pageNo: this.search.pageNum,
            pageSize: this.search.pageSize,
            membername: this.search.membername,
          },
        })
        .then((response) => {
          console.log(response.data.data.list);
          _this.tableData = response.data.data.list;
          _this.page = response.data.data;
          _this.total = response.data.data.total;
        });
    },

    getStatusName(row, column, cellValue) {
      var platform = "";
      if (cellValue == 0) {
        platform = "后台赠送";
      } else if (cellValue == 1) {
        platform = "主动获取";
      }
      return platform;
    },
    getuseStatus(row, column, cellValue) {
      var useType = "";
      if (cellValue == 0) {
        useType = "未使用";
      } else if (cellValue == 1) {
        useType = "已使用";
      } else {
        useType = "已过期";
      }
      return useType;
    },
    //每页显示数量发生变化
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.search.pageSize = val;
      this.load();
    },
    //第几页发生变化
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.search.pageNum = val;
      this.load();
    },
    //查询
    searchBtn() {
      console.log(`当前页`);
      this.load();
    },
    //刷新
    emptyBtn() {
      this.search = {};
      this.search.pageNum = 1;
      this.search.pageSize = 5;
      this.load();
    },
    deleteInfo: function (index, row) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          var _this = this;
          this.$http
            .delete(
              "http://localhost:9999/mks/couponHistory/deleteCouponHistory?id=" +
                row.id
            )
            .then(function (response) {
              if (response.status == 200) {
                //提示成功
                _this.$message({
                  type: "success",
                  message: "删除成功!",
                });
                //重新加载数据
                _this.load();
              }
            })
            .catch(function (error) {
              console.log(error);
              _this.$message.error("你错了。。。");
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  },
};
</script>
<style>
</style>